<template>
  <div class="deetail-main">
    <div class="banner">
      <div class="banner-box">
        <div class="banner-left">
          <img :src="info.coverPath" />
        </div>
        <div class="banner-right">
          <div>
            <span v-if="info.courseType == 0">视频课程</span>
            <span v-if="info.courseType == 1">音频课程</span>
            <span v-if="info.courseType == 2">图文课程</span>
            <div v-if="info.status == 1" class="c-s-item cs-1">待审核</div>
            <div v-else-if="info.status == 2" class="c-s-item cs-2">已通过</div>
            <div v-else-if="info.status == 3" class="c-s-item cs-3">已驳回</div>
            <div v-else-if="info.status == 4" class="c-s-item cs-4">已上架</div>
            <div v-else-if="info.status == 5" class="c-s-item cs-5">已下架</div>
            <div v-else class="c-s-item">未提交</div>
          </div>
          <span class="deetail-title">{{ info.seriesName }}</span>
          <div class="detail-author">
            <span> 课程编号：{{ info.courseCode }} </span>
            <div class="header-img">
              <img :src="info.expertFace" />
            </div>
            <span>{{ info.expertName }}</span>
          </div>
          <div class="course-type">
            <span v-for="(item, index) in info.categoryList" :key="index">{{
              item
            }}</span>
          </div>
          <div class="active">
            <span>{{ info.courseCount }} 节课</span>
            <span>丨</span>
            <span>{{ info.courseDuration | formatTime }}</span>
            <span>丨</span>
            <span>{{ info.courseWatchCount || 0 }} 浏览量</span>
            <span>丨</span>
            <span>{{ info.learnNum || 0 }} 人学习</span>
            <span>丨</span>
            <span>{{ info.evaluateCount || 0 }} 评论</span>
            <span>丨</span>
            <span>{{ (info.goodsEvRate * 100).toFixed(0) || 0 }}% 好评</span>
          </div>
        </div>
        <div v-if="info.isCharge == 0" class="price">免费</div>
        <div v-else class="price">
          ￥<span>{{ info.price || 0 }}</span>
        </div>
      </div>
    </div>
    <div class="course-bottom">
      <div class="course-wrap">
        <Tabs value="column">
          <TabPane label="课程介绍" name="desc">
            <div v-html="info.courseDescribe"></div>
          </TabPane>
          <TabPane label="课程目录" name="column" class="directory">
            <div
              v-for="(item, index) in courseList"
              :key="index"
              class="course-item"
              @click="handleView(item)"
            >
              <div>{{ (index + 1) | sortOrder }}</div>
              <div>
                <div :title="item.courseName">{{ item.courseName }}</div>
                <div>
                  <div>
                    <Icon :type="item.type" />
                    {{ item.fileName }}
                  </div>
                  <div v-if="item.sourceType == '.mp4' || item.sourceType == '.mp3'">
                    {{ item.courseDuration | formatTime }}
                  </div>
                </div>
              </div>
              <div>查看</div>
            </div>
          </TabPane>
          <TabPane label="课程评论" name="comment">
            <Course-comment :id="$route.query.id" />
          </TabPane>
        </Tabs>
      </div>
    </div>
  </div>
</template>

<script>
import * as API_Approval from "@/api/special.js";
import CourseComment from "@/views/curriculum-manage/curriculum-approval/course-comment.vue";
export default {
  components: { CourseComment },
  data() {
    return {
      info: {
        // 课程信息
        coverPath: null,
        courseType: null,
        categoryList: [],
        categoryStr: null,
        sourceName: null,
        courseCode: null,
        expertFace: null,
        expertName: null,
        courseCount: null,
        courseDuration: null,
        courseDescribe: null,
      },
      courseList: [], // 课程目录
    };
  },
  filters: {
    sortOrder(val) {
      return val >= 10 ? val : "0" + val;
    },
    formatTime(val) {
      let s = parseInt(val);
      var m = 0;
      var h = 0;
      if (s > 60) {
        m = parseInt(s / 60);
        s = parseInt(s % 60);
        if (m > 60) {
          h = parseInt(m / 60);
          m = parseInt(m % 60);
        }
      }
      var res = parseInt(s) + "秒";
      if (m > 0) {
        res = parseInt(m) + "分" + res;
      }
      if (h > 0) {
        res = parseInt(h) + "小时" + res;
      }
      return res;
    },
  },
  mounted() {
    let id = this.$route.query.id;
    this.init(id);
  },
  methods: {
    // 初始化表单
    init(id = null) {
      if (id) {
        this.getDetailInfo(id);
        this.getDetailList(id);
      } else {
        this.$Message.error("缺少课程ID");
      }
    },
    // 获取课程列表
    getDetailList(id) {
      API_Approval.getCourseById(id).then((res) => {
        if (res.success) {
          res.result.forEach((i) => {
            if (i.sourceType == ".mp4") {
              i.type = "logo-youtube";
            } else if (i.sourceType == ".mp3") {
              i.type = "ios-musical-notes";
            } else {
              i.type = "md-image";
            }
          });
          this.courseList = res.result;
        }
      });
    },
    // 获取课程统计信息
    getCourseInfo(id) {
      API_Approval.getCourseById2(id).then((res) => {
        if (res.code == 200) {
          Object.keys(res.result).forEach((i) => {
            if (!this.info[i]) this.info[i] = res.result[i];
          });
        }
      });
    },
    // 获取课程信息
    getDetailInfo(id) {
      API_Approval.getCourseInfoById(id).then((res) => {
        if (res.success) {
          res.result.categoryList = res.result.categoryStr?.split(" ");
          this.info = Object.assign(this.info, res.result);
          this.getCourseInfo(id);
        }
      });
    },
    // 查看
    handleView(row) {
      this.$router.push({
        name: "course-play",
        query: { id: this.info.id, current: row.id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.deetail-main {
  min-height: calc(100vh - 80px);
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  .banner {
    width: 100%;
    height: 373px;
    background: linear-gradient(to right, #feedea, #fcf8f8);
    display: flex;
    position: relative;
    .banner-box {
      width: calc(1400 / 1920 * 100vw);
      height: 259px;
      margin: 27px auto 0px;
      display: flex;
      position: relative;
      .banner-left {
        width: 415px;
        height: inherit;
        background-color: #c2c2c2;
        border-radius: 10px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .banner-right {
        flex: 1;
        margin-left: 44px;
        > div:first-child {
          display: inline-block;
          color: #ff5c58;
          background-color: #fadedf;
          padding: 8px 12px;
          border-radius: 4px;
          vertical-align: super;
          margin-right: 20px;
          position: relative;
          .c-s-item {
            display: inline-block;
            position: absolute;
            width: 70px;
            padding: 2px;
            font-size: 12px;
            color: #fff;
            left: -40px;
            top: -4px;
            text-align: center;
            transform: rotate(-45deg);
            background-color: #cccccc;
            &::before {
              position: absolute;
              content: "";
              width: 50px;
              height: 20px;
              left: 43px;
              top: -5px;
              z-index: 100;
              background: #fdf1ef;
              transform: rotateZ(45deg);
            }
            &::after {
              position: absolute;
              content: "";
              width: 20px;
              height: 40px;
              right: 58px;
              top: -14px;
              z-index: 100;
              background: #fdf1ef;
              transform: rotateZ(45deg);
            }
          }
          .cs-1 {
            background-color: #f59a23;
          }
          .cs-2 {
            background-color: #68cabe;
          }
          .cs-3 {
            background-color: #ff5c58;
          }
          .cs-4 {
            background-color: #66cc33;
          }
          .cs-5 {
            background-color: #aaaaaa;
          }
        }
        .deetail-title {
          display: inline-block;
          font-size: 26px;
          line-height: 24px;
          margin-top: 20px;
        }
        .detail-author {
          margin-top: 21px;
          display: flex;
          align-items: center;
          > span {
            display: inline-block;
            font-size: 14px;
            line-height: 24px;
            margin-left: 12px;
          }
          .header-img {
            width: 37px;
            height: 37px;
            border-radius: 50%;
            margin-left: 30px;
            overflow: hidden;
            background: #ffe8e7;
            img {
              width: 100%;
              height: 100%;
              background: #c2c2c2;
            }
          }
        }
        .course-type {
          margin-top: 23px;
          font-size: 14px;
          color: #9d9d9d;
          min-height: 50px;
          max-height: 80px;
          overflow: hidden;
          span {
            display: inline-block;
            width: 96px;
            height: 30px;
            background: #ffffff;
            border-radius: 4px;
            text-align: center;
            line-height: 30px;
            margin-right: 20px;
            margin-bottom: 20px;
            &:nth-child(n + 9) {
              margin-bottom: 0;
            }
          }
        }
        .active {
          width: 600px;
          margin-top: 40px;
          font-size: 16px;
          display: flex;
          justify-content: space-between;
        }
      }
      .price {
        position: absolute;
        top: 26%;
        right: 15%;
        font-size: 26px;
        font-weight: 600;
        color: #ff7a38;
        span {
          font-size: 36px;
        }
      }
    }
  }
  .course-bottom {
    width: 100%;

    background: #ffffff;
    .course-wrap {
      width: calc(1400 / 1920 * 100vw);
      min-height: 475px;
      margin: auto;
      padding: 10px 20px;
      ::v-deep(.ivu-tabs-tab) {
        font-size: 16px;
        font-weight: 500;
      }
      ::v-deep(.ivu-tabs-tab:hover) {
        color: #fa7e7e;
      }
      .directory {
        margin-top: 18px;
      }
      .course-item {
        margin: auto;
        width: 80%;
        border-bottom: 1px solid #f2f2f2;
        display: flex;
        &:hover {
          cursor: pointer;
          background-color: #f7fafc;
        }
        > div:first-child {
          width: 60px;
          font-size: 20px;
          padding: 3px;
          text-align: center;
        }
        > div:nth-child(2) {
          flex: 1;
          max-width: 85%;
          div {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          > div:first-child {
            font-size: 18px;
            padding: 5px;
          }
          > div:last-child {
            display: flex;
            padding: 5px;
            font-size: 14px;
            color: #c1c8d0;
            justify-content: space-between;
            > div:first-child {
              flex: 6;
            }
            > div:last-child {
              flex: 4;
            }
          }
        }
        > div:last-child {
          width: 80px;
          margin: auto 0;
          text-align: center;
          color: #5dd6c9;
        }
      }
    }
  }
}
</style>
